<template>
	<view class="container bg-red">
		<cu-custom bgColor="bg-red" :isBack="false" :issy="true">
			<block slot="content"><text class="text-white">助力赢人气</text></block>
		</cu-custom>			
		<view class="flex justify-center " :style="[{top:CustomBar + 'px'}]">
			<image src="../../static/linepng.jpg" mode="widthFix"></image>
		</view>
		<view class="centerBottom flex justify-center">
			<view class="centerFlex flex justify-center">
				<view class="FlexBox flex justify-center flex-direction align-center">
					<view class="flex align-center TitleZl">
						<text class="renqiText">助力{{Base.province}}赢取人气冠军</text>
						<image src="../../static/zlpng.png" mode="widthFix"></image>
					</view>
					<view class="headimg">
						<image :src="Base.img_url" mode="widthFix" class="Timg"></image>
						<image src="../../static/hg.png" mode="widthFix" class="hgimg"></image>
					</view>
					<view class="margin-top name">{{Base.truename}}</view>
					<view class="text-gray margin-top-xs">已助力 <text class="text-red">{{Base.zl_qty}}</text> 次</view>
					<button open-type="getUserInfo" @click="sumbit" v-if="!zltype" class="zlBtn margin-top flex justify-center align-center" style="background: none;border: none;margin: 0;margin-top:40upx;padding: 0;">
						<view class="zltext">助力好友</view>
						<image src="../../static/zlyq.png" mode="widthFix" class="zlimg"></image>
					</button>
					<button open-type="share" v-else class="zlBtn margin-top flex justify-center align-center" style="background: none;border: none;margin: 0;margin-top:40upx;padding: 0;">
						<view class="zltext">邀请好友助力</view>
						<image src="../../static/zlyq.png" mode="widthFix" class="zlimg"></image>
					</button>		
					<scroll-view class="zlpeople" scroll-x> 
						<view class="flex  justify-center align-center">
							<view class="peopleItem margin-right" v-for="(item,index) in zlList" :key="index" v-if="index<=3">
								<view class="itemImg change flex align-center justify-center">
									<image :src="item.img_url" class="headcimg" mode="widthFix"></image>
								</view>
								<view class="itemText flex justify-center margin-top-xs">
									{{item.truename}}
								</view>
							</view>		
						</view>
					</scroll-view>
				</view>
			</view>
			<image src="../../static/zlbg.png" mode="widthFix"></image>
		</view>
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations , mapState } from 'vuex'
	export default {
		components:{
			
		},
		data() {
			return {
				zlid:"",
				CustomBar: this.CustomBar+10,
				zlList:[],
				imgUrl:'/static/share.jpg',
				zltype:false,
				loading:false,
				Base:{
					
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},		
		onLoad(option) {
			this.zlid = option.zlid;
			this.zltype = option.isme?true:false;
			this.getzhuliBase();
			this.getzhuliList()
		},
		onShow() {

		},
		onShareAppMessage:function(options){
			
		　　let that = this;
		　　// 设置转发内容
		　　let shareObj = {
		　　　　title:`助力${that.userInfo.province}赢取人气冠军`,
		　　　　path: `/pages/zhuli/index?zlid=${that.zlid}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　imageUrl:that.imgUrl, //转发时显示的图片路径，支持网络和本地，不传则使用当前页默认截图。
		　　　　success: function(res){　 // 转发成功之后的回调　　　　　
		　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
		　　　　　　}
		　　　　},
		　　　　fail: function(){　// 转发失败之后的回调
		　　　　　　if(res.errMsg == 'shareAppMessage:fail cancel'){
		　　　　　　　　// 用户取消转发
		　　　　　　}else if(res.errMsg == 'shareAppMessage:fail'){
		　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
		　　　　　　}
		　　　　},
		　　　　complete: function(){
		　　　　　　// 转发结束之后的回调（转发成不成功都会执行）
		　　　　}
		　　};
		　　// 来自页面内的按钮的转发
		　　if( options.from == 'button' ){
		　　　　var dataid = options.target.dataset; 
		　　}
		　　// 返回shareObj
		　　return shareObj;
		},			
		methods: {
			//提交
			sumbit(){
				let _this = this;
				if(this.loading){
					return
				}	
				this.$ComFunJS.beforeLogin().then((res)=>{
					uni.getUserInfo({
					  provider: 'weixin',
					  success:  (info)=>{
						_this.loading=true;
						if(info.errMsg=="getUserInfo:ok"){
							_this.$ComFunJS.ajax({
								method:"post",
								url:"/api/v1.0/help/send",
								data:{
									openid:res.result.openid,
									id:this.zlid,
									img_url:info.userInfo.avatarUrl,
									truename:info.userInfo.nickName,
								},
								success:(res)=>{
									_this.loading=false;
									if(!res.data.error){
										_this.$api.msg('已成功助力~');
										this.getzhuliBase();
										this.getzhuliList()
									}else{
										_this.$api.msg(res.data.result)
									}
									
								}
							})
						}
					  }
					});	
				});
												
			},			
			// 获取助力基础信息
			getzhuliBase(){
				this.$ComFunJS.ajax({
					method:'get',
					url:`/api/v1.0/help/model?id=${this.zlid}`,
					success:(res)=>{
						if(!res.data.error){
							this.Base = {...res.data.result}
						}
					}
				})
			},	
			// 获取助力列表
			getzhuliList(){
				this.$ComFunJS.ajax({
					method:'get',
					url:`/api/v1.0/help/list?id=${this.zlid}`,
					success:(res)=>{
						if(!res.data.error){
							this.zlList = res.data.result
						}
					}
				})
			},				
		},

	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		height: 100%;
	}
	.topImage{
		width: 100%;
		top: 29%;
	}
	.TitleZl{
		position: relative;
		width: 100%;
		.renqiText{
			position: absolute;
			font-size: 34upx;
			width: 100%;
			font-family: FZZongYi-M05;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 999;
			text-align: center;
			top: 27upx;
		}
	}
	.zlpeople{
		margin-top: 190upx;
		.peopleItem{
			.itemImg{
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				overflow: hidden;
				border: 4upx dashed #646464;
				color: #646464;
				font-size: 30upx;
				&.change{
					border: 2upx solid #FE4A4A;
				}
				.headcimg{
					width: 100upx;
					height: 100upx;
					border-radius: 50%;					
				}
			}
			.itemText{
				font-size: 22upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #696969;
			}
		}
	}
	.centerBottom{
		width: 100%;
		position: absolute;
		top:29%;
		.centerFlex{
			width: 100%;
			position: absolute;
			padding-top: 40upx;
			z-index: 99;
			top: 0;
			.FlexBox{
				width: 572upx;
				.zlBtn{
					width: 490upx;
					position: relative;
					.zltext{
						font-size: 28upx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #FFFBF2;
						
						
						position: relative;
						z-index: 99;
						width: 100%;
						text-align: center;
						position:absolute;
					}
					.zlimg{
						
						width: 100%;
						top: 0;
					}
				}
				.headimg{
					width: 126upx;
					height: 126upx;
					background: #FFFFFF;
					border: 4upx solid #FFE764;
					box-shadow: 0px 2px 4px 0px rgba(186, 34, 82, 0.33);
					border-radius: 50%;
					position: relative;
					.Timg{
						width: 126upx;
						height: 126upx;
						border-radius: 50%;
					}
					.hgimg{
						width: 65upx;
						position: absolute;
						right: -10upx;
						top: -25upx;
					}
				}
				.name{
					font-size: 30upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #292929;
				}
			}
		}
	}
</style>
